<template>
	<view class="about-page">
		<view class="about-content">
			<!-- Logo区域 -->
			<view class="logo-section">
				<image class="logo" src="/static/logo.png" mode="aspectFit" />
				<text class="app-name">商城</text>
				<text class="version">版本 1.0.0</text>
			</view>

			<!-- 平台介绍 -->
			<view class="info-card">
				<uni-section title="平台介绍">
					<view class="info-content">
						<text class="description">我们致力于为用户提供优质的购物体验，汇集全球优质商品，打造一站式购物平台。</text>
					</view>
				</uni-section>
			</view>

			<!-- 联系方式 -->
			<view class="info-card">
				<uni-section title="联系方式">
					<uni-list>
						<uni-list-item title="客服电话" note="400-123-4567" />
						<uni-list-item title="客服邮箱" note="support@example.com" />
						<uni-list-item title="商务合作" note="business@example.com" />
					</uni-list>
				</uni-section>
			</view>

			<!-- 其他信息 -->
			<view class="info-card">
				<uni-list>
					<uni-list-item title="用户协议" showArrow @click="navigateTo('/pages/agreement/user')" />
					<uni-list-item title="隐私政策" showArrow @click="navigateTo('/pages/agreement/privacy')" />
				</uni-list>
			</view>

			<!-- 版权信息 -->
			<view class="copyright">
				<text>Copyright © 2024 All Rights Reserved</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	// 页面跳转
	const navigateTo = (path) => {
		uni.navigateTo({
			url: path
		})
	}

	// 返回上一页
	const goBack = () => {
		uni.navigateBack()
	}
</script>

<style lang="scss" scoped>
	.about-page {
		background-color: #f8f8f8;
		min-height: 100vh;
	}

	.about-content {
		padding: 15px;
	}

	.logo-section {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 30px 0;
		border-radius: 8px;
		margin-bottom: 15px;

		.logo {
			width: 80px;
			height: 80px;
			margin-bottom: 15px;
		}

		.app-name {
			font-size: 20px;
			font-weight: bold;
			color: #333;
			margin-bottom: 8px;
		}

		.version {
			font-size: 14px;
			color: #999;
		}
	}

	.info-card {
		background-color: #fff;
		border-radius: 8px;
		margin-bottom: 15px;
		overflow: hidden;

		.info-content {
			padding: 15px;

			.description {
				font-size: 14px;
				color: #666;
				line-height: 1.6;
			}
		}
	}

	.copyright {
		text-align: center;
		padding: 20px 0;

		text {
			font-size: 12px;
			color: #999;
		}
	}
</style>